<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<script src='http://cdn.jsdelivr.net/vue/1.0.26/vue.js'></script>
<script src='https://cdn.jsdelivr.net/vue.router/0.7.10/vue-router.min.
js'></script>
<div id="root">
	<p v-if="male">Male</p>
 	<p v-if="female">Female</p>
 	<p v-if="age>25">Age:{{age}}</p>
 	<p v-if="name.indexOf('lin')>0">Name:{{name}}</p>
</div>
<script>
/**
 * [vm description]
 * @type {Vue}
 * 所以，v-if指令只渲染他身后表达式为true的元素；
 * 在这里引入v-show指令，
 * 因为二者的区别是v-show指令会渲染他身后表达式为false的元素，
 * 这样的元素上会添加css代码：style="display:none"; 
 * 将上面v-if的实例代码改为v-show，
 * 页面渲染效果为：
 */
/**
 * [vm description]
 * @type {Vue}
 * 2, v-show 与v-if类似，只是会渲染其身后表达式为false的元素，
 * 而且会给这样的元素添加css代码：style="display:none";
 * 3, v-else 必须跟在v-if/v-show指令之后，不然不起作用；
 * 如果v-if/v-show指令的表达式为true，则else元素不显示；
 * 如果v-if/v-show指令的表达式为false，则else元素显示在页面上；
 */
	var vm = new Vue({
		el : '#root',
		data : {
			male : true,
			female : false,
			age : 30,
			name : 'line'
		}
	});
</script>	
</body>
</html>